<template>
	<view class="pages">
		<!-- 头部 -->
		<!-- 弹出客服图片 -->
		<uni-popup ref="kefuPopup" type="center" :animation="true" @change="changePopup($event,'kefuPopup')">
			<image class="accountModelImg" show-menu-by-longpress :src="IMAGE_STATIC+'/images/kefu.jpg'"  mode="heightFix"></image>
		</uni-popup>
		<!-- 用户信息 -->
		<view class="index_main userPadding">
			<!-- 状态栏高度 -->
			<view class="status_bar" :style="'height:' + statusBarHeight + 'px;'"></view>
			<view class="user-head-block">
				<!-- 用户头像 -->
				<!-- <view class="user-head-img" v-if="usermsg.head_photo" v-show="usermsg.head_photo"
					:style="{background:'url('+imgShow(usermsg.head_photo)+') 100% /cover no-repeat'}">
				</view> -->
				<view class="user-head-img" v-if="usermsg.head_photo">
					<init-image :src="imgShow(usermsg.head_photo)" mode="" />
				</view>
				<view class="user-head-img" v-else
					:style="{background:'url('+IMAGE_STATIC+'/images/logo.png) 100% /cover no-repeat'}">
				</view>
				<!-- 用户昵称信息 -->
				<view class="user-head-text"  v-if="JSON.stringify(usermsg) =='{}'">
					<view class="user-head-text-block" @tap="$tools.jump('/pages1/firtPage/firtPage')">
						<view class="user-head-name">立即登录</view>
					</view>
				</view>
				<view class="user-head-text" v-else>
					<view class="user-head-text-block">
						<view class="user-head-name">
							{{usermsg.real_name?usermsg.real_name:'待实名'}}
							<text class="vip">{{usermsg.grade?levelset(usermsg.grade):'' }}</text>
							<text class="vip1" v-if="usermsg.is_service ==1">运营中心</text>
						</view>
						<!-- leveliconset -->
						<!-- <view class="user-level-icon" v-if="usermsg.grade">
							<image :src="IMAGE_STATIC+'/userimage/vip.png'" mode="scaleToFill"/>
						</view> -->
					</view>
					<view class="user-head-level">
						邀请码: {{ usermsg.uid  || ''}}
					</view>
				</view>
				<view class="right">
					<image class="ico" @tap.stop="goTo('/pages/notice/noticeList')" :src="IMAGE_STATIC+'/userimage/icon-notice.png'" mode="scaleToFill"/>
					<image class="ico ico-setup" @tap.stop="goTo('/pages/setup/setup')" :src="IMAGE_STATIC+'/userimage/icon-setup.png'" mode="scaleToFill"/>
				</view>
			</view>
		</view>
		<view class="user-content-up-block">
			<view class="top">
				<view class="left">
						<image class="img" :src="IMAGE_STATIC+'/userimage/icon-income.png'" mode="scaleToFill"/>
					<view class="txt">
						本月收益
						<image class="ico" @click="showData = !showData" :src="IMAGE_STATIC+'/userimage/eye.png'" mode="scaleToFill"/>
					</view>
				</view>
				<view class="right" @tap.stop="goTo('/pages/userInfo/income')">
					<image class="ico" :src="IMAGE_STATIC+'/images/arrow-right.png'" mode="scaleToFill"/>
				</view>
			</view>
			<view class="ul">
				<view class="li" @tap.stop="goTo('/pages/userInfo/income')">
					<view class="txt">个人收益(元)</view>
					<view class="num">{{ showData?(userIoncome.person_benefit) || 0:'****' }}</view>
				</view>
				<view class="li" @tap.stop="goTo('/pages/userInfo/income')">
					<view class="txt">团队收益(元)</view>
					<view class="num">{{ showData?(userIoncome.team_benefit) || 0:'****' }}</view>
				</view>
			</view>
		</view>
		<view class="user-content-up-block mt-24">
			<view class="top" >
				<view class="left">
						<image class="img" :src="IMAGE_STATIC+'/userimage/icon-account.png'" mode="scaleToFill"/>
					<view class="txt">
						账户总览
						<image class="ico" @click="showData1 = !showData1" :src="IMAGE_STATIC+'/userimage/eye.png'" mode="scaleToFill"/>
					</view>
				</view>
				<view class="right" @tap.stop="goTo('/pages/asset/asset')">
					<image class="ico" :src="IMAGE_STATIC+'/images/arrow-right.png'" mode="scaleToFill"/>
				</view>
			</view>
			<view class="ul">
				<view class="li" @tap.stop="goTo('/pages/asset/asset')">
					<view class="txt">余额（元）</view>
					<view class="num">{{ showData1?wallet.yue || 0:'****' }}</view>
				</view>
				<view class="li" @tap.stop="goTo('/pages/asset/asset')">
					<view class="txt">积分</view>
					<view class="num">{{ showData1?(wallet.purse_type_03) || 0:'****' }}</view>
				</view>
			</view>
		</view>
		<view class="user-content-down-block">
			<view v-for="(p,index) in usercontentdownarr" :key="index">
				<!-- <view class="user-content-down-msg" v-if="p.type =='kefu'" @tap.stop="openPopup('kefuPopup')"> -->
					<!-- #ifdef MP-WEIXIN -->
				<!--<view class="user-content-down-msg" v-if="p.type =='kefu'">
					<button type="size" class="noStyle" open-type="contact" @contact="getContact">
					<view class="user-content-down">
						<view class="user-content-down-icon" :style="{background:'url('+IMAGE_STATIC+'/userimage/icon-5.png'+') 100% /cover no-repeat'}">
						</view>
						<view class="user-content-down-text">{{p.content}}</view>
					</view>
					<view class="user-content-down-arrows"></view>
					</button>
				</view>-->
					<!-- #endif -->
					<!-- #ifdef H5 || APP-PLUS ||  MP-WEIXIN -->
					<view class="user-content-down-msg" v-if="p.type =='kefu'" @tap.stop="kefuJump()">
					<view class="user-content-down">
						<view class="user-content-down-icon" :style="{background:'url('+IMAGE_STATIC+'/userimage/icon-5.png'+') 100% /cover no-repeat'}">
						</view>
						<view class="user-content-down-text">{{p.content}}</view>
					</view>
					<view class="user-content-down-arrows"></view>
				</view>
					<!-- #endif -->
				<view class="user-content-down-msg" v-else @tap.stop="goTo(p.pagepath,p.id)">
					<view class="user-content-down">
						<view class="user-content-down-icon" :style="{background:'url('+p.icon+') 100% /cover no-repeat'}">
						</view>
						<view class="user-content-down-text">
							{{p.content}}
						</view>
					</view>
					<view class="user-content-down-arrows"></view>
				</view>
			</view>
		</view>
		<!-- 底部导航 -->
		<initTabbar :current-page="2" />
	</view>
</template>

<script>
	import initTabbar from '@/pagesMain/init-tabbar.vue';
	export default {
		components: {
			initTabbar,
		},
		data() {
			return {
				IMAGE_STATIC: this.$url.assetsPath,
				IMAGE_PREFIX: this.$url.urlPath,
				usercontentdownarr: [
					{
					id: 1,
					content: '我的地址',
					icon: this.$url.assetsPath+'/userimage/icon-1.png',
					pagepath: '/pages/address/address'
				},
				{
					id: 10,
					content: '兑换申请',
					icon: this.$url.assetsPath+'/userimage/icon-9.png',
					pagepath: '/pages/userInfo/applyExchange'
				},
				{
					id: 1,
					content: '我的订单',
					icon: this.$url.assetsPath+'/userimage/icon-2.png',
					pagepath: '/pages/order/order'
				},
				{
					id: 2,
					content: '银行卡',
					icon: this.$url.assetsPath+'/userimage/icon-3.png',
					pagepath: '/pages/bank/bank'
				},
				{
					id: 1,
					content: '我的交易',
					icon: this.$url.assetsPath+'/userimage/icon-4.png',
					pagepath: '/pages/tradeOrder/tradeOrder'
				},
				{
					id: 1,
					content: '我的客服',
					icon: this.$url.assetsPath+'/userimage/icon-5.png',
					pagepath: '',
					type:'kefu'
				},
				// {
				// 	id: 1,
				// 	content: '实名认证',
				// 	icon: this.$url.assetsPath+'/userimage/icon-6.png',
				// 	pagepath: '/pages/userInfo/useridcomfrim'
				// },
				{
					id: 1,
					content: '授权证书',
					icon: this.$url.assetsPath+'/userimage/icon-7.png',
					pagepath: '/pages/userInfo/authorizationCertificate?value1=03&value2=授权证书'
				},  {
					id: 3,
					content: '服务商公约',
					icon: this.$url.assetsPath+'/userimage/icon-8.png',
					pagepath: '/pages/userInfo/serviceProvider'
				},
				{
					id: 4,
					content: '关于我们',
					icon: this.$url.assetsPath+'/userimage/icon-10.png',
					pagepath: '/pages/setup/about'
				},
			],
				usermsg: uni.getStorageSync('usermsg') ? uni.getStorageSync('usermsg') : {},
				noreadcount: '',
				isLogoutShow: true,
				showData:true, // 是否显示数据
				showData1:true, // 是否显示数据
				userIoncome:{
					perNum:0,
					teamNum:0,
				},
				wallet:{
					yue:0,
					points:0,
				},
				statusBarHeight:0,
			}
		},
		 // 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.init();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onHide() {
			// 离开页面清除singUrl
			uni.removeStorageSync('singUrl');
		},
		onLoad(){
			const that = this
			//获取手机型号
			uni.getSystemInfo({
      success: function (res) {
      that.statusBarHeight = res.statusBarHeight//状态栏高度
      that.platform = res.platform//机型
      console.log('platform',that.platform ,',statusBarHeight',that.statusBarHeight)
      }
    });
		},
		async onShow() {
			let isLogin = uni.getStorageSync('token') != '';
			console.log("isLogin：",isLogin);
			if(isLogin){
				this.init()
				this.usermsg = uni.getStorageSync('usermsg') ? uni.getStorageSync('usermsg') : {}
			}else{
				this.isLogoutShow = false;
			}
			console.log("usermsg:",this.usermsg);
		},
		computed: {
			levelset() {
				return function(msg) {
					switch (msg) {
						case 1:
							return 'v1'
						case 2:
							return 'v2'
						case 3:
							return 'v3'
						case 4:
							return 'v4'
						case 5:
							return 'v5'
						case 6:
							return 'v6'
						case 7:
							return 'v7'
						case 8:
							return 'v8'
						case 9:
							return 'v9'
					}
				}
			},
			leveliconset() {
				return function(msg) {
					switch (msg) {
						case 1:
							return this.$url.assetsPath+'/userimage/p-vipicon.png'
						case 2:
							return this.$url.assetsPath+'/userimage/p-usericon.png'
						case 3:
							return this.$url.assetsPath+'/userimage/partner-icon.png'
						case 4:
							return this.$url.assetsPath+'/userimage/h-partnericon.png'
					}
				}
			}
		},
		methods: {
			init(){
				let isLogin = uni.getStorageSync('token') != '';
				console.log("isLogin：",isLogin);
				if(isLogin){
					this.getQiNiuToken()
					this.getUserBenefit();
					this.getUserWallet();
					// this.getUserInfo();
				}
			},
			goTo(pagepath,id){
				let isLogin = uni.getStorageSync('token') != '';
				console.log("isLogin：",isLogin);
				if (isLogin) {
					console.log('usermsg',this.usermsg.real_name)
					if(!this.usermsg.real_name){
						const that = this
						uni.showModal({
							title: '温馨提示',
							content: '为了方便您使用其他功能，请您先实名',
							success: function (res) {
								if (res.cancel) {
										console.log('用户点击取消');
										// 用户点击确定，继续执行跳转
										that.$tools.jump(pagepath)
										return true;
									}
									if (res.confirm) {
										console.log('用户点击确定');
										setTimeout(()=>{
											that.$tools.jump('/pages/setup/editUserInfo')
										},500)
								}
							}
						})	
					}else{
						this.$tools.jump(pagepath)
					}
				}else{
					// this.$tools.jump('/pages1/operate/login');
					this.$tools.toastRedirectTo('登录已失效，请重新登录', '/pages1/firtPage/firtPage');
				}
			},
			// 本月收益
			getUserBenefit(){
				const data={
				}
				this.$Ajax('/api/summary/user/getUserBenefit',data,res => {
						if(res.success){
							this.userIoncome = res.data
						}
					})
			},
				// 钱包信息
			getUserWallet(){
			const data={
			}
			this.$Ajax('/api/user/info/getUserWalletInfo',data,res => {
					if(res.success){
						this.wallet = res.data.userInfo
						this.wallet.yue = (Number(this.wallet.purse_type_01) + Number(this.wallet.purse_type_02)).toFixed(2)
						// console.log(this.wallet.purse_type_01,this.wallet.purse_type_02,'yue',this.wallet.yue)
					}
				})
			},
			// h5接客服
			kefuJump(){
				const url='https://work.weixin.qq.com/kfid/kfc426d422b0e5d06b1'
				const corpid='ww51ba938e87c6e259'
				const that = this
				// #ifdef APP-PLUS
				let sweixin = null
				plus.share.getServices(res => {
					sweixin = res.find(i => i.id === 'weixin')
					if (sweixin) {
						sweixin.openCustomerServiceChat({
							corpid: corpid,//企业id
							url:url//客服地址链接
						})
					} else {
						that.$tools.toast('当前环境不支持微信操作')
					}
				}, function() {
					that.$tools.toast("获取服务失败，不支持该操作。" + JSON.stringify(e))
				})
				// uni.share({
				// 	provider: "weixin",
				// 	openCustomerServiceChat: true,
				// 	customerUrl: url, //企业微信地址
				// 	corpid: corpid, //企业id
				// 	success: (res) => {
				// 		console.log("success:" + JSON.stringify(res));
				// 	},
				// 	fail: (err) => {
				// 		console.log("fail:" + JSON.stringify(err));  
				// 	}
				// });
				// plus.runtime.openURL(url);
				// #endif
				// #ifdef H5
					location.href = url;
				// #endif
				// #ifdef  MP-WEIXIN  
				wx.openCustomerServiceChat({
					extInfo: {
						url: url//客服地址链接
					},
					corpId: corpid,//必须和你小程序上的一致
					success(res) {
						console.log(res, 1)
					},
					fail(res) {
						console.log(res, 2)
					},
				})
				// #endif
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import '@/common/scss/style.css';

	.pages {
		width: 100%;
		min-height: 100vh;
		background: #F4F4F4;
		overflow: unset;
		padding-bottom: 150rpx;
		.userPadding{
			padding-top: 60rpx;
		}
		
		.index_main {
			width: 100%;
			padding-right: 32rpx;
			padding-left: 40rpx;
			height: 440rpx;
			background: linear-gradient( 143deg, #E15534 0%, #C03733 95%);
			padding-top: 20rpx;
			/* #ifdef MP-WEIXIN */
			padding-top:calc( var(--status-bar-height)) !important;
			/* #endif */
			.user-head-block {
				width: 100%;
				margin: 0 auto;
				padding-top: 50rpx;
				display: flex;
				align-items: center;
				position: relative;
				z-index: 2;

				.user-head-img,.custom-image {
					width: 110rpx !important;
					height: 110rpx !important;
					// background: url($uni-static-dir+'/userimage/userheadimg.png') 100% no-repeat;
					// background-size: 100% 100%;
					border-radius: 100%;
					overflow: hidden;
				}

				.user-head-text {
					margin-left: 20rpx;

					.user-head-text-block {
						display: flex;
						align-items: center;

						.user-head-name {
							font-size: 30rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #fff;
						}

						.user-level-icon {
							width: 48rpx;
							height: 48rpx;
							// background: url($uni-static-dir+'/userimage/p-usericon.png') 100% no-repeat;
							background-size: 100% 100%;
							margin-left: 20rpx;
						}
					}
					.vip{
						margin-left: 10rpx;
						font-size: 30rpx;
						color: #ffc34a;
						font-style: italic;
					}
					.vip1{
						background: #fff;
						border-radius: 5px;
						padding: 2px;
						font-size: 14px;
						margin-left: 10px;
						color: #cc4133;
					}

					.user-head-level {
						font-size: 25rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #fff;
						margin-top: 20rpx;
					}
				}
			}
			.right{
				position: absolute;
				right: 20rpx;
				display: flex;
				.ico{
					width:48rpx ;
					height: 48rpx;
				}
				.ico-setup{
					margin-left: 24rpx;
				}
			}
			.user-level-block {
				width: 90%;
				height: 210rpx;
				bottom: 0;
				margin: 0 auto;
				background: url($uni-static-dir+'/userimage/userhead-levelback.png') 100% no-repeat;
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				position: relative;
				z-index: 1;

				.user-level-righttext {
					width: 114rpx;
					height: 40rpx;
					background: #B66D3A;
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					font-size: 22rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 40rpx;
					position: absolute;
					right: 30rpx;
				}
			}
		}

		.user-content-up-block {
			width: 93.6%;
			margin: auto;
			margin-top: -120rpx;
			/* #ifdef MP-WEIXIN */
			padding-top:-100rpx;
			/* #endif */
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx;
			.top{
				@include flexBetween;
				.left,.txt{
					@include flexLeft;
				}
				.txt{
					margin-left: 16rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
				.img{
					width: 72rpx;
					height: 72rpx;
				}
				.ico{
					width: 32rpx;
					height: 32rpx;
					margin-left: 16rpx;
				}
				.right{
					width: 50%;
					@include flexRight;
				}
			}
			.ul{
					@include flexBetween;
					padding-right:124rpx;
					padding-left: 80rpx;
					margin-top: 20rpx;
					.li{
						.txt{
							font-size: 24rpx;
							color: #666;
							height: 34rpx;
							line-height: 34rpx;
						}
						.num{
							margin-top: 16rpx;
							font-weight: 500;
							font-size: 32rpx;
							color: #333333;
						}
					}
				}

		}
		.mt-24{
			margin-top: 24rpx;
		}
		.user-content-down-block {
			width: 93.6%;
			margin: auto;
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 24rpx;
			.user-content-down-msg {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top:36rpx ;
				padding-bottom: 24rpx;
				border-bottom: 1px solid #EEEEEE;
				.user-content-down {
					display: flex;
					align-items: center;
					position: relative;

					.user-content-down-icon {
						width: 40rpx;
						height: 40rpx;
					}

					.user-content-down-text {
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #232323;
						margin-left: 20rpx;
					}

					.user-content-down-bandge {
						position: absolute;
						width: 50rpx;
						height: 30rpx;
						background-color: #FFFFFF;
						border-radius: 35rpx;
						border: 2rpx solid red;
						color: red;
						text-align: center;
						font-size: 24rpx;
						line-height: 30rpx;
						font-weight: bold;
						left: 175rpx;
						top: -8rpx;
					}
				}

				.user-content-down-arrows {
					width: 36rpx;
					height: 36rpx;
					background: url($uni-static-dir+'/userimage/arrows.png') 100% no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
	.accountModelImg{
		width: 80vw;
		height: 80vh;
		margin: auto;
	}
	image,img{
		width: 100%;
		height: 100%;
	}
	.noStyle{
		width: 100% !important;
		height: auto !important;
		border: none !important;
		padding: 0 !important;
		@include flexBetween;
		line-height: 0;
		&::after{
			width: auto !important;
			height: auto !important;
			border: none !important;
		}
	}
	button{
		background: #FFFFFF;
	}
	.button-hover{
	    background: none !important; 
	}
// 大尺寸的
@media (min-height: 812px) {
	.pages .index_main{
		height: 560rpx;
		display: flex;
	}
}	
</style>
